<template>
  <div class="info positRel">
    <div class="banners">
      <img class="imgs" src="../../assets/images/info_bg.png" mode="" />
      <div class="title">
        <div class="name">资讯动态</div>
        <div class="subTitle">新闻创造价值，资讯创造财富</div>
      </div>
    </div>
    <div class="mymain">
      <div class="optionBtns">
        <div class="items">
          <!-- <Icon type="ios-text" size="40" /> -->
          <!-- <div class="nun">{{ list.numberOfComments || 0 }}</div> -->
        </div>
      </div>
      <div class="health-details-head">
        <h2 class="sub-title">
          {{ list.title }}
        </h2>
        <p class="info">
          <span>{{ list.origin || "暂无" }}</span
          ><span>{{ list.createTime }}</span>
        </p>
      </div>
      <div class="article">
        <video
          :src="list.details"
          v-if="list.resourceType == 2"
          height="500px"
          width="100%"
          controls
        ></video>
      </div>
      <div class="comment">
        <div class="temp"></div>
        <div class="commentBtn" @click="toCommot()" v-if="toDesc">
          发表评论 <Icon type="ios-create-outline" />
        </div>
      </div>
      <div class="addCom" v-if="!toDesc">
        <div class="title">发表评论</div>
        <textarea
          style="padding: 15px 20px"
          v-model="insertVal"
          @change="getinserVal"
          placeholder="说点什么呗~"
          class="textarea"
          name=""
          id=""
          cols="30"
          rows="10"
        ></textarea>
        <div class="upload">
          <img
            :src="v"
            alt=""
            v-for="(v, i) in imgs"
            :key="i"
            style="
              display: block;
              width: 58px;
              height: 58px;
              margin-right: 10px;
            "
          />
          <Upload
            ref="upload"
            :show-upload-list="false"
            :format="['jpg', 'jpeg', 'png']"
            :max-size="2048"
            :before-upload="handleBeforeUpload"
            multiple
            type="drag"
            action
            style="display: inline-block; width: 58px; height: 58px"
            :style="
              uploadList.length == 0 ? 'margin-left:calc(20/1920*100vw)' : ''
            "
          >
            <div style="width: 58px; height: 58px; line-height: 58px">
              <Icon type="ios-camera" size="20"></Icon>
            </div>
          </Upload>
        </div>
        <div class="comfor">
          <div class="temp"></div>
          <div class="btnsGroup">
            <div class="cancle" @click="cancle()">取消</div>
            <div class="cert" @click="confirm()">确定</div>
          </div>
        </div>
      </div>
      <!-- 评论区 -->
      <!-- <div>
        <div
          class="comment-item"
          v-for="(item, index) in commotList"
          :key="index"
        >
          <div class="remarks-items">
            <div class="portrait">
              <img class="imgs" :src="item.createByFace" alt="" />
              <div class="perinfo">
                <div class="nikename">{{ item.createByName }}</div>
                <div class="time">{{ item.createTime }}</div>
              </div>
            </div>
            <div class="details" style="">
              <div class="desc">{{ item.details }}</div>
              <div style="display: flex">
                <img
                  :src="v"
                  v-for="(v, i) in item.imgUrl"
                  :key="i"
                  alt=""
                  style="width: 58px; height: 58px; margin-right: 5px"
                />
              </div>
            </div>
            <div
              style="
                flex-direction: column;
                display: flex;
                justify-content: space-between;
              "
            >
              <div class="option">
                <div class="option-items" @click="getComment2(item.id)">
                  <img
                    class="imgs"
                    src="../../assets/images/desc2x.png"
                    mode=""
                  />
                  <div class="nun">{{ item.replyNum }}评论</div>
                </div>
                <div class="option-items">
                  <img
                    class="imgs"
                    src="../../assets/images/thumb2x.png"
                    mode=""
                  />
                  <div class="nun">{{ item.nun2 }}</div>
                  <span class="report">举报</span>
                </div>
              </div>
              <div class="commot-items" @click="toCommot2(item.id)">
                <div
                  class="nun"
                  style="color: #9d9d9d; margin-right: 10px; cursor: pointer"
                >
                  回复
                </div>
              </div>
            </div>
          </div>
          <div v-if="flag1 == item.id" class="commot">
            <div class="commot-box">
              <div v-for="(v, i) in commotList2" :key="i" class="commot-item">
                <div class="commotNikename">{{ v.createByName }}:</div>
                <div class="commotdesc">{{ v.details }}</div>
              </div>
              <div v-if="flag3" style="margin-top: 10px">
                <textarea
                  style="
                    padding: 15px 20px;
                    width: 100%;
                    height: 100px;
                    border: 1px solid #9d9d9d;
                    outline: none;
                  "
                  v-model="commetText"
                  @change="getinserVal"
                  placeholder="说点什么呗~"
                  class="textarea"
                  name=""
                  id=""
                  cols="30"
                  rows="10"
                ></textarea>
                <div class="comfor">
                  <div class="temp"></div>
                  <div class="btnsGroup">
                    <div class="cancle" @click="cancle2()">取消</div>
                    <div class="cert" @click="confirm2()">确定</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div> -->

      <Comment :informationId="informationId" :flag="flag5"></Comment>
    </div>

    <Footer class="footer" :top="75"></Footer>
  </div>
</template>
<script>
import Footer from "@/components/footer/my_footer.vue";
import Comment from "@/components/comment/comment.vue";
import {
  getInfo,
  getCommentList,
  getCommentlist,
  publishComment,
  publishComment2,
} from "@/api/informat.js";
import { onLoadFile } from "@/api/otwoo.js";
export default {
  data() {
    return {
      preImg: "../../assets/darling.jpg",
      contents:
        "一切存在严格地说都需要“时间”。时间证实一切，因为它改变一切。气候寒暑，草木荣枯，人从生到死，都不能缺少时间，都从时间上发生作",
      insertVal: "",

      list: {},
      toDesc: true,
      // 传过来的ID
      id: this.$route.query.id,
      // 一级评论列表
      commotList: [],
      // 二级评论列表
      commotList2: [],
      page: 1,
      rows: 10,
      flag3: true,
      imgName: "",
      flag1: "",
      commetText: "",
      visible: false,
      uploadList: [],
      imgs: [],
      informationId: "",
      flag5: false,
    };
  },
  components: {
    Footer,
    Comment,
  },
  beforeCreate() {},
  mounted() {
    this.id = this.$route.query.id;
    this.informationId = this.id;
    this.getInformatInfo();
    // this.getComment();
  },
  methods: {
    getInformatInfo() {
      getInfo(this.id)
        .then((res) => {
          const { code, result } = res;
          if (code == 200) {
            this.list = result;
            this.informationId = this.id;
          }
        })
        .catch(() => {});
    },

    // 打开回复一级评论文本框
    toCommot2(id) {
      this.flag1 = id;
      this.commentId = id;
      this.flag3 = true;
      // this.getComment2();
    },
    // 一级评论
    toCommot() {
      // 打开评论
      this.toDesc = false;
    },
    cancle() {
      this.toDesc = true;
    },
    confirm() {
      let data = {
        informationId: this.id,
        commentType: 0,
        details: this.insertVal,
        imgUrl: this.imgs.join(","),
      };
      publishComment(data).then((res) => {
        if (res.success) {
          this.$Message.success("评论成功");
          this.getComment();
          this.flag5 = true;
          this.insertVal = "";
          this.imgs = [];
        }
      });
      this.toDesc = true;
    },

    // 上传图片
    onLoadFile(file) {
      var formData = new FormData();
      formData.append("file", file);
      onLoadFile(formData).then((res) => {
        this.imgs.push(res.result);
      });
    },

    handleView(name) {
      this.imgName = name;
      this.visible = true;
    },
    handleRemove(file) {
      const fileList = this.$refs.upload.fileList;
      this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
    },
    handleBeforeUpload(file) {
      const check = this.uploadList.length < 5;
      if (!check) {
        this.$Notice.warning({
          title: "最多只能上传一张头像",
        });
      }
      this.onLoadFile(file);
      return false;
    },
    getinserVal(e) {
      console.log("这是是alvalval", e.target.value);
      this.console.log(this.id);
    },
    // 获取二级评论
    // getComment2(id) {
    //   this.flag1 = id;
    //   this.commentId = id;
    //   this.getcommot();
    // },
    getComment() {
      let data = {
        page: this.page,
        rows: this.rows,
        informationId: this.id,
      };
      getCommentList(data).then((res) => {
        if (res.success) {
          this.commotList = res.result.rows;
          this.commotList.forEach((v) => {
            console.log(v);
            let arr = v.imgUrl.split(",");
            v.imgUrl = arr;
          });
        }
      });
    },
    // // getInformatInfo() {
    // //   getInfo(this.id)
    // //     .then((res) => {
    // //       console.log(res);
    // //       const { code, result } = res;
    // //       if (code == 200) {
    // //         this.list = result;
    // //       }
    // //     })
    // //     .catch(() => {});
    // // },

    // getcommot() {
    //   let data = {
    //     page: this.page,
    //     rows: this.rows,
    //     commentId: this.commentId,
    //     informationId: this.id,
    //   };
    //   console.log(data);
    //   getCommentlist(data).then((res) => {
    //     // console.log(res);
    //     if (res.success) {
    //       console.log(res.result.rows);
    //       this.commotList2 = res.result.rows;
    //     }
    //   });
    // },
    // // 提交二级评论
    // confirm2(id) {
    //   let data = {
    //     informationId: this.id,
    //     commentType: 1,
    //     details: this.commetText,
    //     pid: this.commentId,
    //   };
    //   publishComment2(data).then((res) => {
    //     if (res.success) {
    //       this.$Message.success("评论成功");
    //       this.getComment();
    //       this.getcommot();
    //       this.flag3 = false;
    //       this.commetText = "";
    //     }
    //   });
    //   // this.flag3 = true;
    // },
    // cancle2() {
    //   this.flag3 = false;
    // },
  },
};
</script>
<style lang="scss" scoped>
.info {
  font-family: Source Han Sans CN;
  padding-bottom: 50px;
  .banners {
    width: 100%;
    height: calc(440 / 1920 * 100vw);
    text-align: center;
    // position: sticky;
    // z-index: 55;
    // top: calc(80 / 1920 * 100vw);
    // left: 0;
    .imgs {
      width: 100%;
      height: calc(440 / 1920 * 100vw);
    }
    .title {
      width: 100%;
      // height: calc(440 / 1920 * 100vw);
      font-size: 36px;
      color: #fff;
      position: absolute;
      text-align: center;
      top: calc(150 / 1920 * 100vw);
      left: 0;
      .subTitle {
        font-size: 26px;
      }
    }
  }
  .mymain {
    // background: #fff;
    background-color: rgba(248, 248, 248, 1);
    width: calc(1400 / 1920 * 100vw);
    padding-top: calc(30 / 1920 * 100vw);

    margin: 0 auto;
    position: relative;
    .sub-title {
      font-size: calc(28 / 1920 * 100vw);
      color: #2c2c2c;
      text-align: center;
    }
    .info {
      font-size: 14px;
      color: #babbbc;
      text-align: center;
      margin: 30px 0;
      span:first-child {
        margin-right: 20px;
      }
    }

    .optionBtns {
      width: calc(44 / 1920 * 100vw);
      text-align: center;
      position: absolute;
      top: calc(130 / 1920 * 100vw);
      left: calc(44 / 1920 * 100vw);
      width: 31px;
      height: 11px;
      font-size: 14px;
      font-weight: 400;
      color: #2c2c2c;
      line-height: 24px;
    }
    .article {
      // width: 1039px;
      width: calc(1039 / 1920 * 100vw);
      margin: 0 auto;
      // height: 163px;
      font-size: 20px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #2c2c2c;
    }
  }
}
.addCom {
  width: calc(1280 / 1920 * 100vw);
  padding: calc(35 / 1920 * 100vw);
  margin: 0 auto;
  background: #f9f9f9;
  // background: pink;
  .title {
    font-size: 24px;
    font-weight: 500;
    color: #2c2c2c;
    margin-bottom: calc(25 / 1920 * 100vw);
  }
  .textarea {
    display: block;
    margin: 0 auto;
    width: calc(1210 / 1920 * 100vw);
    height: 200px;
    background: #ffffff;
    border: 1px solid #fff;
    outline: none;
  }
  .upload {
    display: flex;
  }
}
.comfor {
  display: flex;
  justify-content: space-between;
  margin-bottom: calc(30 / 1920 * 100vw);
  .btnsGroup {
    display: flex;
    justify-content: right;
    text-align: center;
    line-height: calc(36 / 1920 * 100vw);
    .cancle {
      width: calc(70 / 1920 * 100vw);
      height: calc(36 / 1920 * 100vw);
      border: 1px solid #fd5151;
      color: #fd5151;
      border-radius: 4px;
      cursor: pointer;
      margin-right: calc(18 / 1920 * 100vw);
    }
    .cert {
      width: calc(70 / 1920 * 100vw);
      height: calc(36 / 1920 * 100vw);
      // height: 14px;
      font-size: 14px;
      border-radius: 4px;
      font-weight: 400;
      color: #ffffff;
      cursor: pointer;
      background: #fd5151;
      // line-height: 40px;
    }
  }
}
.comment-item {
  margin-bottom: 20px;
}
.remarks-items {
  display: flex;
  .portrait {
    display: flex;
    justify-content: start;
    align-items: center;
    .imgs {
      width: calc(60 / 1920 * 100vw);
      height: calc(60 / 1920 * 100vw);
      margin-right: calc(15 / 1920 * 100vw);
    }
    .perinfo {
      // width: 64px;
      // height: 16px;
      height: calc(60 / 1920 * 100vw);
      font-size: 16px;
      font-weight: 400;
      color: #070a0c;
      .nikename {
      }
      .time {
        // width: 61px;
        // height: 9px;
        margin-top: 20px;
        text-align: center;
        font-size: 12px;
        color: #cbcbcb;
      }
    }
  }
  .details {
    flex: 1;
    margin-left: 5px;
    display: flex;
    flex-direction: column;
  }
  .option {
    display: flex;
    justify-self: start;
    align-items: center;
    &-items {
      // line-height: calc(20 / 1920 * 100vw);
      margin-left: calc(15 / 1920 * 100vw);
      display: flex;
      justify-content: start;
      align-items: center;
      .imgs {
        width: calc(14 / 1920 * 100vw);
        height: calc(14 / 1920 * 100vw);
        margin-right: calc(5 / 1920 * 100vw);
        cursor: pointer;
      }
      .nun {
        color: #9d9d9d;
        font-size: calc(14 / 1920 * 100vw);
        cursor: pointer;
      }
      .report {
        color: #9d9d9d;
        font-size: calc(14 / 1920 * 100vw);
        margin-left: calc(14 / 1920 * 100vw);
        cursor: pointer;
      }
    }
  }
}
.comment {
  font-size: 20px;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  margin-top: calc(30 / 1920 * 100vw);
  display: flex;
  justify-content: space-between;
  padding: calc(30 / 1920 * 100vw) calc(60 / 1920 * 100vw);
  .commentBtn {
    // width: calc(150 / 1920 * 100vw);
    // height: calc(48 / 1920 * 100vw);
    padding: 2px 5px;
    line-height: calc(48 / 1920 * 100vw);
    background: #fd5151;
    border-radius: calc(5 / 1920 * 100vw);
  }
}
.commot {
  background-color: #eee;
  margin-top: 10px;
  // .commot-box {
  margin-left: 150px;
  .commot-item {
    display: flex;
    .commotNikename {
      margin-right: 10px;
      color: #fd5151;
    }
    .commotdesc {
      color: #070a0c;
    }
  }
  // }
}
::v-deep.ivu-upload {
  margin: 0 !important;
}
</style>
